<template>
	<view>
		<cu-custom class="bg-E96141" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">紧急联系人</block>
		</cu-custom>
		<form>
			<view class="cu-form-group">
				<view class="title">关系</view>
				<input placeholder="如：自己、子女、朋友" name="input" 
					v-model="myFormData.relation"
					maxlength="10"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<input placeholder="请输入姓名" name="input" 
					v-model="myFormData.realname"
					maxlength="10"></input>
			</view>			
			<view class="cu-form-group">
				<view class="title">性别</view>
				<switch class='switch-sex' 
					@change="SwitchC" 
					:class="switchC?'checked':''" 
					:checked="switchC?true:false"></switch>
			</view>
			<view class="cu-form-group">
				<view class="title">电话</view>
				<input placeholder="输入手机号码" name="input" 
					v-model="myFormData.phone"
					maxlength="15"></input>
			</view>
			
			<view class="cu-form-group margin-top">
				<view class="title">省市区县</view>
				<input placeholder="请输入省市区县" name="input" 
					v-model="myFormData.proCityAreaName"
					maxlength="30"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">详细住址</view>
				<!-- <input placeholder="请输入详细住址(忽略省市区县)" name="input" v-model="myFormData.realname"></input> -->
				<textarea placeholder="详细住址(忽略省市区县),如:楼号、单元、楼层、门牌号等(100字以内)" 
					maxlength="100"
					:value="myFormData.detailAddress"
					:auto-size="{ minRows: 3, maxRows: 5 }"
					@input="addressDetailInput"
					style="border:1px solid #eeeeee; padding: 10upx;"/>
			</view>
			
			<view class="padding flex flex-direction">
				<button class="cu-btn lg text-white" 
					style="background-color: #E96141;"
					@click="onSubmit">保存</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				switchC: true,
				imgList: [],
				uploadUrl:"/sys/common/upload",
				myFormData:{
					id:'',
					relation: '',
					realname:'',
					sex:1,
					phone:'',
					proCityAreaName: '',
					detailAddress: '',
				},
			};
		},
		onLoad: function (option) {
			console.log("this.$Route.query",this.$Route.query);
			let query=this.$Route.query
			if(query){
				this.myFormData=query;
				if(this.myFormData.sex=='女'){
				  this.switchC = false
				}else if(this.myFormData.sex=='男'){
				  this.switchC = true
				}
				if(this.myFormData.avatar){
				  this.imgList=[this.myFormData.avatar]
				}
				if(!this.myFormData.birthday){
				  this.myFormData.birthday= '无'
				}
				if(this.myFormData.identity=='普通成员'){
				  this.myFormData.identity = 1
				}else if(this.myFormData.identity=='上级'){
				  this.myFormData.identity = 2
				}
				if(this.myFormData.status=='正常'){
				  this.myFormData.status = 1
				}else if(this.myFormData.status=='冻结'){
				  this.myFormData.status = 2
				}
				 this.Avatar=this.myFormData.avatar
	
				Object.keys(this.myFormData).map(key=>{
				  if(this.myFormData[key]=='无'){
					this.myFormData[key] = ''
				  }
				})
				console.log("this.myFormData",this.myFormData)
			}
		},
		methods: {
			//详情地址填写
			addressDetailInput(e){
				let value = e.detail.value
				if(!value || value.length<1){
					this.myFormData.detailAddress = ''
				}
				this.myFormData.detailAddress = value
			},
			onSubmit() {
				this.$tip.toast('保存成功')
				setTimeout(function() {
					uni.navigateBack({
						delta: 1
					})
				}, 600);
				return false
			  let myForm = this.myFormData
			  let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
			  let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
			  console.log("myForm",myForm)
			  if(!myForm.phone || myForm.phone.length==0){
				this.$tip.alert('请输入手机号');
				return false
			  }
			  if(!checkPhone.test(myForm.phone)){
				this.$tip.alert('请输入正确的手机号');
				return false
			  }
			  if(!checkEmail.test(myForm.email)){
				this.$tip.alert('请输入正确的邮箱地址');
				return false
			  }
				this.myFormData.id = this.$store.getters.userid
				if(this.switchC){
					this.myFormData.sex=1
				}else{
					this.myFormData.sex=2
				}
				console.log('myform',this.myFormData)
				this.$tip.loading();
				this.$http.put('/sys/user/appEdit',this.myFormData).then(res=>{
					console.log(res)
					this.$tip.loaded();
					if (res.data.success){
						this.$tip.toast('提交成功')
						this.$Router.replace({name:'userdetail'})
						/* uni.navigateTo({
							url: '/pages/user/userdetail'
						}) */
					}
				}).catch(()=>{
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
			},
			DateChange(e) {
				this.myFormData.birthday = e.detail.value
			},
			SwitchC(e) {
				this.switchC = e.detail.value
			},
			ChooseImage() {
				var that=this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: res.tempFilePaths[0],
								name: 'file'
							})
							.then(res => {
								that.myFormData.avatar=res.data.message;
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						this.imgList = res.tempFilePaths
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
